<template>
  <div class="progress-main" ref="progressMainRef">
    <div class="progress-line" :style="lineStyle">
    </div>
    <div class="text-line-tip" :style="textLineStyle">
      <div class="text" v-html="textShow" :style="textStyle"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'custom-progress',
  props:{
    progressHeight:{
      type:Number,
      default:6,
    },
    percentage:{
      type:String,
      default: '0'
    },
    bgColor:{
      type:String,
      default: '#5593db'
    },
    textTip:{
      type:String,
      default: ''
    },
  },
  data(){
    return {
      domWidth:0,
    }
  },
  computed:{
    lineStyle(){
      return {
        width:this.percentage+'%',
        height:this.progressHeight+'px',
        backgroundImage: 'linear-gradient(90deg, #2088F2 0%, #52A6FD 100%)',
        transition:'width 0.5s ease',
      }
    },
    textLineStyle(){
      return {
        left:this.percentage+'%',
        transform:'translate(-2px,0)',
        top:0,
        transition:'left 0.5s ease',
      }
    },
    textStyle(){
      if( (this.domWidth * parseFloat(this.percentage) / 100 + 160 )>
        this.domWidth ){
        return {
          top:'5px',
          left:'-205px',
          justifyContent:'flex-end'
        }
      }else{
        return {
          top:'5px',
          left:'5px'
        }
      }

    },
    textShow(){
      return `<span>${this.textTip}</span><span style="color:#409EFF;font-weight: 600;">${this.percentage}%</span>`;
    }
  },
  methods:{
    onResize(){
      this.$nextTick(()=>{
        this.domWidth = this.$refs.progressMainRef.offsetWidth || 0
      })
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.domWidth = this.$refs.progressMainRef.offsetWidth || 0
    })
    window.addEventListener('resize',this.onResize)
  },

};
</script>

<style scoped lang="sass">
  .progress-main
    width: 100%
    position: relative
    .progress-line
      position: absolute

    .text-line-tip
      width: 2px
      height: 11px
      border-bottom-left-radius: 1px
      border-bottom-right-radius: 1px
      background: #52A6FD
      position: absolute

      .text
        position: absolute
        color: #333
        font-size: 10px
        letter-spacing: 0.71px
        font-weight: 400

        display: flex
        min-width: 160px
        align-items: center
        column-gap: 5px

</style>
